<template>
  <view class="wedding-booking">
    <!-- 顶部轮播图 -->
    <swiper
      class="banner"
      :indicator-dots="true"
      :autoplay="true"
      interval="3000"
      circular
    >
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 场地类型选择 -->
    <view class="venue-types">
      <view class="section-title">场地类型</view>
      <view class="type-list">
        <view
          class="type-item"
          v-for="(item, index) in venueTypes"
          :key="index"
          @tap="selectVenueType(item)"
        >
          <image :src="item.icon" mode="aspectFit" />
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 热门场地推荐 -->
    <view class="hot-venues">
      <view class="section-title">热门场地</view>
      <view class="venue-list">
        <view
          class="venue-item"
          v-for="(item, index) in hotVenues"
          :key="index"
          @tap="goToVenueDetail(item)"
        >
          <image :src="item.image" mode="aspectFill" />
          <view class="venue-info">
            <text class="venue-name">{{ item.name }}</text>
            <text class="venue-price">¥{{ item.price }}起</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 修改：添加底部占位 -->
    <view class="bottom-space"></view>

    <!-- 预约按钮 -->
    <view class="booking-btn" @tap="showBookingForm"> 立即预约 </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 轮播图数据
const bannerList = ref([
  { image: 'https://img.freepik.com/free-photo/wedding-archway-backyard-happy-wedding-ceremony_1304-4090.jpg' },
  { image: 'https://img.freepik.com/free-photo/wedding-ceremony-beach_1232-3080.jpg' },
  { image: 'https://img.freepik.com/free-photo/wedding-ceremony-garden_1303-11466.jpg' }
]);

// 场地类型数据
const venueTypes = ref([
  { 
    name: '草坪婚礼', 
    icon: 'https://img.icons8.com/color/96/garden.png' 
  },
  { 
    name: '教堂婚礼', 
    icon: 'https://img.icons8.com/color/96/church.png' 
  },
  { 
    name: '海边婚礼', 
    icon: 'https://img.icons8.com/color/96/beach.png' 
  },
  { 
    name: '庄园婚礼', 
    icon: 'https://img.icons8.com/color/96/villa.png' 
  }
]);

// 热门场地数据
const hotVenues = ref([
  {
    id: 1,
    name: '玫瑰庄园',
    image: 'https://img.freepik.com/free-photo/wedding-ceremony-luxury-restaurant_1303-12920.jpg',
    price: 19999
  },
  {
    id: 2,
    name: '海边教堂',
    image: 'https://img.freepik.com/free-photo/beautiful-wedding-ceremony-beach_1232-3083.jpg',
    price: 29999
  }
]);

// 选择场地类型
const selectVenueType = (type) => {
  uni.navigateTo({
    url: `/pages/venue-list/venue-list?type=${type.name}`,
  });
};

// 跳转到场地详情
const goToVenueDetail = (venue) => {
  uni.navigateTo({
    url: `/pages/venue-detail/venue-detail?id=${venue.id}`,
  });
};

// 显示预约表单
const showBookingForm = () => {
  uni.navigateTo({
    url: '/pages/booking/booking',
    fail: (err) => {
      console.error('跳转失败：', err);
      uni.showToast({
        title: '跳转失败',
        icon: 'none',
      });
    },
  });
};
</script>

<style scoped>
.wedding-booking {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.banner {
  height: 400rpx;
}

.banner image {
  width: 100%;
  height: 100%;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 30rpx 20rpx;
}

.venue-types {
  background-color: #fff;
  margin: 20rpx 0;
}

.type-list {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.type-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.hot-venues {
  background-color: #fff;
}

.venue-list {
  padding: 0 20rpx;
}

.venue-item {
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.venue-item image {
  width: 100%;
  height: 300rpx;
}

.venue-info {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.venue-name {
  font-size: 28rpx;
  font-weight: bold;
}

.venue-price {
  color: #ff4d4f;
  font-size: 28rpx;
}

.booking-btn {
  position: fixed;
  bottom: 140rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff4d4f;
  color: #fff;
  padding: 20rpx 100rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  z-index: 100;
}

.bottom-space {
  height: 180rpx;
}
</style>
